<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增采购申请')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal" id="form-procurehead-add">
            <div class="form-group">
                <div class="col-sm-12" style="text-align: center">
                <a class="btn btn-success" onclick="submitHandler()">
                    <i ></i> 提交申请
                </a>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">采购申请编号：</label>
                <div class="col-sm-4">
                    <input name="code" class="form-control" type="text" th:value="*{ code}"  readonly>
                </div>
                <label class="col-sm-2 control-label">申请时间：</label>
                <div class="col-sm-4">
                    <input name="createTime" class="form-control" th:value="*{ createTime}"  type="text" readonly>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">申请老师：</label>
                <div class="col-sm-4">
                    <input name="createBy" class="form-control" th:value="*{userName}" type="text" readonly>
                </div>
                <label class="col-sm-2 control-label">备注说明：</label>
                <div class="col-sm-4">
                    <textarea class="form-control" name="remark" placeholder="请输入备注说明" rows="3" type="text" style="height: 50px;"></textarea>
                </div>
            </div>
            <div class="form-group">
                <a class="btn btn-primary btn-rounded btn-sm" onclick="addItem()"><i class="fa fa-plus"></i>&nbsp;添加</a>
                <a class="btn btn-danger btn-rounded btn-sm" onclick="sub.delRow()"><i class="fa fa-remove"></i>&nbsp;删除</a>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "wms/procurehead"
        $("#form-procurehead-add").validate({
            focusCleanup: true
        });

        function submitHandler() {

            if ($.validate.form()) {
                var sizeItem = $("input[name='itemList[0].quantity']").length;
                if(sizeItem < 1 ){
                    $.modal.alertWarning("请至少添加一个物料");
                    return;
                }
                $.operate.save(prefix + "/add", $('#form-procurehead-add').serialize(),submitBack );
            }
        }
        function submitBack() {
            $.modal.alertSuccess("提交成功");
            $.modal.closeTab();
        }
        var prefixItem = ctx + "wms/procureitem";

        $(function() {
            var options = {
                url: prefixItem + "/list",
                removeUrl: prefix + "/remove",
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                modalName: "采购申请明细",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'index',
                        align: 'center',
                        title: "序号",
                        width: "5%",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            var columnId = $.common.sprintf("<input type='hidden' name='goods[%s].id' value='%s'>", index, row.id);
                            return columnIndex + $.table.serialNumber(index) + columnId;
                        }
                    },
                    {
                        field: 'deptId',
                        title: '仓库id',
                        width: "5%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].deptId' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'deptName',
                        title: '仓库名称',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].deptName' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'code',
                        title: '物品编号',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].code' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'name',
                        title: '物品名称',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].name' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'model',
                        title: '规格型号',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].model' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'type',
                        title: '类型',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].type' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'unit',
                        title: '单位',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].unit' value='%s' readonly>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'quantity',
                        title: '采购数量',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='number' name='itemList[%s].quantity' value='%s' indexV='"+index+"' onchange='changePrice(this)' required>", index, value);
                            return html;
                        }

                    },
                    {
                        field: 'planUnitPrice',
                        title: '计划单价',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='number' name='itemList[%s].planUnitPrice' value='%s' indexV='"+index+"' onchange='changePrice(this)' required>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'totalPrice',
                        title: '总价',
                        width: "10%",
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='number' name='itemList[%s].totalPrice' value='%s' readonly>", index, value);
                            return html;
                        }
                    }]
            };
            $.table.init(options);
        });
        function addItem() {
            var options = {
                title: "物料选择",

                url: "/wms/materialInfo/materialInfoList",
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }
        function doSubmit(index,layero) {
            var body = $.modal.getChildFrame(index);
            var json = body.find('#json').val();
            $.modal.close(index);
            var arr = JSON.parse(json);
            for(var i=0;i<arr.length;i++){
                addColumn(arr[i])
            }
        }
        function addColumn(row) {
            var row1 = {
                deptId:row.deptId,
                deptName:row.parentName,
                code:row.code,
                name:row.name,
                model:row.model,
                type:row.type,
                unit:row.unit,
                quantity:"0",
                planUnitPrice:"0",
                totalPrice:"0"
            };
            // sub.addColumn(row1,'bootstrap-table');
            sub.addRow(row1,'bootstrap-table')
        }
        function delColumn(row) {
            sub.delRow()
        }
        function changePrice(price) {
            var index = $(price).attr("indexV");
            var quantity = $("input[name='itemList["+index+"].quantity']").val();
            var planUnitPrice = $("input[name='itemList["+index+"].planUnitPrice']").val();

            var total =parseFloat(quantity) * parseFloat(planUnitPrice);
            $("input[name='itemList["+index+"].totalPrice']").val(total);
        }
    </script>
</body>
</html>